<script>
import {getUnitList} from "@/api/unit";
import {getUserInfo} from "@/utils/auth";

export default {
  props: ["value", "newUnit"],
  data() {
    return {
      options: [],
      innerValue: '',
    }
  },
  watch: {
    value() {
      this.innerValue = this.value;
    },
    innerValue() {
      this.$emit('setValue', this.innerValue);
    },
  },
  mounted() {
    console.log(22,this.value)
    this.getUnitList();
  },
  methods: {
    addUnit() {
      this.$router.push("/basic_settings/unit");
    },
    getUnitList() {
      getUnitList({
        userID: getUserInfo().userID,
      }).then(res => {
        let data = res.data.data;
        let arr = [];
        for (let i = 0; i < data.length; i++) {
          arr.push({
            label: data[i].unitName,
            value: data[i].unitName,
          });
        }

        if (this.value !== '')
          this.innerValue = this.value;
        this.options = arr;

        console.log(this.options, arr);
      });
    },
  }
}
</script>

<template>
  <div  class="unit-select" style="display: inline-block;">
    <el-select v-model="innerValue" style="flex: 1;" ref="unitSelectRef"
               collapse-tags
               default-first-option placeholder="请选择单位">
      <el-tooltip v-if="newUnit === false ? false : true" content="新建单位" placement="top"   slot="prefix">
        <svg-icon icon-class="plus" style="font-size: 16px; color: #1e1e1e;"
                  @click.stop="addUnit"></svg-icon>
      </el-tooltip>
      <el-option v-for="item in options"
                 :key="item.value" :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<style  lang="scss">
.unit-select .el-input__prefix{
  text-align: right;
  right: 8px;
  top: 8px;
  z-index: 99999;
  cursor: pointer;
  //position: relative;
  //width: 25px;
  margin-right: 0;
  margin-left: auto;
  width: 25px;
}

.unit-select  .el-input--prefix .el-input__inner {
  padding-left: 10px;
}
</style>
